<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">订单</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">服务单详情</a></el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card style="margin-top:30px" v-if="row.type == 1">
      <!-- 表格开始 -->
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="image" label="商品图片">
            <template slot-scope="scope">
                <img :src="scope.row.image">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="snPrice" label="价格/货号" ></el-table-column>
          <el-table-column prop="attribute" label="属性" ></el-table-column>
          <el-table-column prop="num" label="数量"></el-table-column>
          <el-table-column prop="knum" label="小计" width="70"></el-table-column>
          <el-table-column prop="money" label="拆分数量" width="90"></el-table-column>
        </el-table>
    </el-card>

    <!-- 卡片视图2 -->
    <el-card style="margin-top:40px">
      <!-- 查询表单开始 -->
      <el-form ref="order" :model="returnOrderDetailsForm" label-width="80px">
        <el-form-item label="服务单号:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请状态:" label-width="150px">
          <el-input :value="returnOrderDetailsForm.status === '0'?'待处理':''" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="订单编号:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.order_id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请时间:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.apply_time" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户账号:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.user_account" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系人:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.linkman" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.linkman_mobile" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="退货原因:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.cause" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="问题描述:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.evidence" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="凭证照片:" label-width="150px">
          <img :src="returnOrderDetailsForm.image">
        </el-form-item>
        <el-form-item label="订单金额:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.pay_money" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="退运费" label-width="150px">
          <el-radio-group v-model="returnOrderDetailsForm.is_return_freight" @change="change3">
            <el-radio :label="0">不退运费</el-radio>
            <el-radio :label="1">退运费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="确认退款金额:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.return_money"></el-input>
        </el-form-item>
        <el-form-item label="选择收货点:" label-width="150px">
          <el-select v-model="returnOrderDetailsForm.address" placeholder="请选择" @change="change4">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.address"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="收货人姓名:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.username"></el-input>
        </el-form-item>
        <el-form-item label="所在区域:" label-width="150px">
          <el-select v-model="returnOrderDetailsForm.provinceid" @change="change1" placeholder="省">
              <el-option
                v-for="item in provinces"
                :key="item.provinceid"
                :label="item.province"
                :value="item.provinceid">
              </el-option>
          </el-select>
          <span>-</span>
          <el-select v-model="returnOrderDetailsForm.cityid" @change="change2" placeholder="城市">
              <el-option
                v-for="item in cities"
                :key="item.cityid"
                :label="item.city"
                :value="item.cityid">
              </el-option>
          </el-select>
          <span>-</span>
          <el-select v-model="returnOrderDetailsForm.areaid" placeholder="区" @change="change5">
              <el-option
                v-for="item in areas"
                :key="item.areaid"
                :label="item.area"
                :value="item.areaid">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:" label-width="150px">
          <el-input v-model="detailsAddress"></el-input>
        </el-form-item>
        <el-form-item label="联系电话:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.linkman_mobile"></el-input>
        </el-form-item>
        <el-form-item label="处理备注:" label-width="150px">
          <el-input v-model="returnOrderDetailsForm.remark"></el-input>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="onSubmit" v-if="returnOrderDetailsForm.status === '0'">确认退货</el-button>
          <el-button type="danger" @click="rejectReturn" v-if="returnOrderDetailsForm.status === '0'">拒绝退货</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      tableData2: [],
      searchMap: {},
      searchMap2: {},
      searchMap3: {},
      row: {},
      returnOrderDetailsForm: {
      },
      options: [],
      //下拉框
      provinces: [],
      cities: [],
      areas: [],
      //详细地址
      detailsAddress: ''
    }
  },
  methods: {
    async getReturnOrderList () {
      const { data: res } = await this.$http.get(`/orders/order/returnOrderItemService?orderId=${this.row.orderId}`)
      const { data: res2 } = await this.$http.get(`/orders/returnOrder/findReturnOrder?orderId=${this.row.orderId}`)
      const { data: res3 } = await this.$http.get(`/user/provinces/findAll`)
      this.returnOrderDetailsForm = res2
      this.returnOrderDetailsForm.is_return_freight  = 0
      this.tableData = res
      this.provinces = res3
      this.options = res2.maps
    },
    addBrand () {},
    initData () {
      let tables = []
    },
    async change1 (val) {
      this.cities = []
      this.areas = []
      this.returnOrderDetailsForm.cityid = null
      this.searchMap2.provinceid = val
      const { data: res } = await this.$http.post(`/user/cities/findList`,this.searchMap2)
      this.cities = res
    },
    async change2 (val) {
      this.cities = []
      this.areas = []
      this.searchMap3.cityid = val
      const { data: res } = await this.$http.post(`/user/areas/findList`,this.searchMap3)
      this.areas = res
    },
    change3 (val) {
      if (val === 1) {
        this.returnOrderDetailsForm.return_money =  this.returnOrderDetailsForm.pay_money+ this.returnOrderDetailsForm.post_fee
      }else{
        this.returnOrderDetailsForm.return_money =  this.returnOrderDetailsForm.pay_money
      }
    },
    change4 (val) {
      this.options.forEach(element => {
        if (element.value === val) {
          this.detailsAddress = element.label
          return 
        }
      });
    },
    change5 (val) {
      
    },
    // 确认退货
    async onSubmit () {
      const { data: res } = await this.$http.post(`/orders/returnOrder/returnOk`,this.returnOrderDetailsForm)
      if (res.code !== 200) {
        return this.$message.error("确认收货失败");
      }
      this.$message.success("确认收货成功")
      this.$router.push("/order/return_order")
    },
    // 拒绝退货
    async rejectReturn () {
      const { data: res } = await this.$http.post(`/orders/returnOrder/rejectReturn`,this.returnOrderDetailsForm)
      if (res.code !== 200) {
        return this.$message.error("拒绝失败");
      }
      this.$message.success("拒绝成功")
      this.$router.push("/order/return_order")
    }
  },
  created () {
    this.row =  this.$route.query.row;
    this.getReturnOrderList()
  }
}
</script>

<style>

</style>